<template>
  <section class="todoapp">
    <!-- 除了驼峰, 还可以使用-转换链接 -->
    <TodoHeader @create="crateFn" :arr="list"></TodoHeader>
    <TodoMain :arr= "showArr" @del="clearFn"></TodoMain>
    <TodoFooter :newArr= "showArr"
     @changeType="typeFn"
     @clear=clearFn></TodoFooter>
  </section>
</template> 

<script>
// 1.0 样式引入
import "./styles/base.css"
import "./styles/index.css"   
import TodoHeader from "./views/TodoHeader";
import TodoMain from "./views/TodoMain";
import TodoFooter from "./views/TodoFooter";
export default {
  components: {
    TodoHeader,
    TodoMain,
    TodoFooter,
  },
  data(){
    return{
      // 默认从本地取值
      list:JSON.parse(localStorage.getItem('todoList'))||[],
       getSel:'all', // 默认显示全部
    }
  },
  methods:{
    // 1.添加任务
    crateFn(taskName){
      // console.log(taskName); 子组件传过来的数据
      this.list.push({
        id:this.list.length? this.list.at(-1).id+1 :100,
        name:taskName,
        isDone:false
      })
    },
    // 2.删除任务
    clearFn(id){
      this.list=this.list.filter(item=>item.id !==id)
    },
    // 接收子组件传过来的数据类型
    typeFn(str){ //all  yes no 数据类型
    this.getSel=str
    // console.log(str);
    
    },
    // 3.清除已完成
    clearFn(){
      this.list=this.list.filter(item=>item.isDone===false)
    }



  },
  computed:{
    // 在 computed定义showArr 数组- 通过list配合条件筛选而来 
    showArr(){
      if(this.getSel==='yes'){//显示完成
      return this.list.filter(item=>item.isDone)
      } else if(this.getSel==='no'){// 显示未完成
      return this.list.filter(item=>!item.isDone)
      } else{ //显示全部
        return this.list 
      }
    }
  },
  // 数据缓存
  watch:{
    list:{
      deep:true,
      handler(){
        // 只要list变化 - 覆盖式保存到localStorage里
        localStorage.setItem('todoList',JSON.stringify(this.list))
      }
    }

  }
};
</script>